<!-- HTypora -->

<template>
  <div :class="className" class='h-typora-wrapper'>
    <iframe class="typora-write-wrapper" ref="wrapper" name="typora-write-wrapper" @load="setIframeHeight" id="fram_box"></iframe>
    <div class="CodeMirror-code"/>
  </div>
</template>

<script>
import("../assets/js/typora_js")
export default {
  data() {
    return {
      content: '',
      className: '',
    }
  },
  watch: {
    content() {
      this.setIframe()
    }
  },
  mounted() {
    this.initBlog()
    this.setIframe()
  },
  methods: {
    initBlog() {
      this.content = JSON.parse(window.sessionStorage.getItem("thisBlog")).content
    },
    setIframe() {
      const iframe = this.$refs.wrapper.contentWindow
      iframe.document.open()
      iframe.document.write('<!DOCTYPE html>\n' +
          '<html lang="">\n' +
          '<head>\n' +
          '    <meta charset="utf-8">\n' +
          '    <meta http-equiv="X-UA-Compatible" content="IE=edge">\n' +
          '    <link type="text/css" rel="stylesheet" href="https://crabin-01-1309266318.cos.ap-guangzhou.myqcloud.com/theme-Github.css">\n'
      )

      iframe.document.write(this.content)
      iframe.document.close()


    },
    setIframeHeight() {
      const iframe = this.$refs.wrapper.contentWindow
      this.$refs.wrapper.height = iframe.document.documentElement.offsetHeight
    }
  }
}
</script>
<style lang="less" scoped>

.h-typora-wrapper {
  width: 100%;
  background: #ffffff;
  font-size: xx-large;

  .typora-write-wrapper {
    width: 100%;
    border: none;
  }
}
</style>

